<template>
  <div>
    <div
      id="main"
      style="border: 1px solid black; width: 100%; height: 200px"
    ></div>

    <!-- 分割线 -->
    <el-divider content-position="left">电影院列表</el-divider>

    <!-- 表格 -->
    <el-table :data="cinemas">
      <el-table-column align="center" prop="cinema_name" label="影院名称">
      </el-table-column>
      <el-table-column align="center" prop="address" label="影院地址">
      </el-table-column>
      <el-table-column width="200px" align="center" label="影院位置">
        <template slot-scope="scope">
          {{ scope.row.province }}
          {{ scope.row.city }}
          {{ scope.row.district }}
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="moveTo(scope.$index)"
            size="small"
            type="success"
            circle
            icon="el-icon-location-outline"
          ></el-button>
          <el-button
            @click="$router.push(`/home/cinema-room-list/${scope.row.id}`)"
            size="small"
            type="success"
            circle
            icon="el-icon-s-unfold"
          ></el-button>
          <el-button
            size="small"
            type="warning"
            circle
            icon="el-icon-edit"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            circle
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import httpApi from '@/http'

export default {
  data() {
    return {
      cinemas: [], // 保存影院列表数据
    }
  },

  methods: {
    /** 将地图的中心点移动到选中的电影院的位置 */
    moveTo(index) {
      let cinema = this.cinemas[index] // 当前选中的影院
      let { longitude, latitude } = cinema
      // 设置地图的中心的位置  setCenter(center, immediately, duration)
      // center (([number, number] | LngLat)) 中心点经纬度
      // immediately (Boolean = false) 是否立即过渡到目标位置
      // duration (Number?) 如果使用动画过度，动画过度的时长控制，单位 ms，默认值是内部自动计算的一个动态值。
      this.map.setCenter([longitude, latitude], false, 500)
    },

    /** 查询影院列表 */
    list() {
      // 发送http请求： /cinemas
      httpApi.CinemaApi.queryAll().then(res => {
        console.log(res)
        this.cinemas = res.data.data
      })
    },

    initMap() {
      // 初始化地图
      AMapLoader.load({
        key: '7bfbe3ab215345f405c23b5eed760ca8', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        this.map = new AMap.Map('main', {
          //设置地图容器id
          viewMode: '3D', //是否为3D地图模式
          zoom: 12, //初始化地图级别
          center: [116.399825, 39.908702], //初始化地图中心点位置
        })
        // 基于AMap，为所有的影院都添加一个Marker点标记
        this.cinemas.forEach(item => {
          let marker = new AMap.Marker({
            position: [item.longitude, item.latitude],
            title: item.cinema_name,
          })
          this.map.add(marker) // 将Marker添加到地图上
        })
      })
    },
  },

  mounted() {
    this.list()
    this.initMap()
  },
}
</script>

<style lang="scss" scoped></style>
